import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Table, Button, Card, Radio, Modal,Icon,Row,Col,Divider,message
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './style.less';
import moment from 'moment';
import docCookies from "../../common/DocCookies";

@connect(state => ({
  coupon: state.coupon,
}))
export default class CouponList extends PureComponent {
  state = {
    pageNo:1,
    pageSize:10,
    total:0,
    rsId:docCookies.getItem("rsId"),

    couponListData:[]
  };

  ////初始化渲染后触发 整个过程只调用一次
  componentDidMount() {
    this.loadCouponInfo();
  }

  loadCouponInfo(){
    const { dispatch } = this.props;
    const pageNo = this.state.pageNo ;
    const pageSize = this.state.pageSize ;
    // 需要传递的参数信息
    const params = {
      rsId:this.state.rsId,
      pageNo: pageNo,
      pageSize: pageSize,
    };
    dispatch({
      type: 'coupon/fetchListPluginCoupon',  //请求的action
      payload:params,
      callback:(data) =>{
        this.setState({
          couponListData: data.list,
          pageNo:data.pageNo,
          pageSize:data.pageSize,
          total:data.total,
        });
      }
    });

  }

  showAllCouponInfo (id){
    const { dispatch} = this.props;
    const param = {
      pcId:id
    }
    dispatch({
      type: 'coupon/couponDetails',
      payload:param
    });
  }

  editCouponInfo (id,showDetail){
    const { dispatch} = this.props;
    const param = {
      pcId:id,
      showDetail:showDetail
    }
    dispatch({
      type: 'coupon/couponAddForm',
      payload:param
    });
  }

  delCoupon (id){
    const { dispatch } = this.props;
    const params = {
      id:id,
      delStatus:1
    };

    Modal.confirm({
      title: '提示',
      content: '您确定删除该优惠券吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: 'coupon/fetchDelCoupon',  //请求的action
          payload: params,
          callback: (response) => {
            for (var i = 0; i < this.state.couponListData.length; i++) {
              if (id == this.state.couponListData[i].id) {
                this.state.couponListData.splice(i, 1);
                break;
              }
            }
            message.success(response.msg)
          }
        });
      }
    })
  }

  openAddNewCoupon(){
    const { dispatch} = this.props;
    dispatch({
      type: 'coupon/couponAddForm',
    });
  }

  handleTableChange = (page, pageSize) => {
    this.state.pageNo = page;
    this.setState({
      pageNo:page,
      pageSize:pageSize
    });
    this.loadCouponInfo();
  }

  render() {
    const { pageSize ,total,pageNo } = this.state;

    const columns = [{
      title: '优惠券标题',
      dataIndex: 'rpcTitle',
      render: (text, record) => (
        <span>
          <a href="javascript:void(0)" onClick={() => this.showAllCouponInfo(record.id)} >{text}</a>
        </span>
      )
    }, {
      title: '商家名称',
      dataIndex: 'rpcName',
      key: 'rpcName',
    }, {
      title: '卡券使用期',
      dataIndex: 'rpcStarttime',
      key: 'rpcStarttime',
      render: (text, record) => (
        <span>
          {record.rpcStarttime} 至 {record.rpcEndtime}
        </span>
      )
    }, {
      title: '已领取',
      dataIndex: 'getCount',
      key: 'getCount',
    }, {
      title: '总量',
      dataIndex: 'rpcMaxCount',
      key: 'rpcMaxCount',
    }, {
      title: '领用统计',
      render: (text, record) => (
        <span>
          <a href="javascript:void(0)" onClick={() => this.showAllCouponInfo(record.id)} >查看</a>
        </span>
      )
    }, {
      title: '操作',
      render: (text, record) => (
        <span>
          <a href="javascript:void(0)" onClick={() => this.editCouponInfo(record.id,true)} >详情</a>
          <Divider type="vertical" />
          <a href="javascript:void(0)" onClick={() => this.editCouponInfo(record.id,false)} >编辑</a>
          <Divider type="vertical" />
          <a href="javascript:void(0)" onClick={() => this.delCoupon(record.id)} >删除</a>
        </span>
      ),
    }];

    const paginationProps = {
      pageSize:pageSize,
      total:total,
      current:pageNo,
      onChange:this.handleTableChange
    };

    return (
          <Card title="优惠券列表" extra={<Button type="primary" icon="plus" style={{ float:'right' }} onClick={() => this.openAddNewCoupon()}>添加</Button>}>
            <Row gutter={16}>
              <Col className="gutter-row" span={24}>
                <Table dataSource={this.state.couponListData}
                       rowKey={record => record.id}
                       columns={columns}
                       style={{ width: '100%' }}
                       pagination={paginationProps}
                />
              </Col>
            </Row>
          </Card>
    );
  }
}
